import React, { useEffect } from 'react';
import { Navigate, useLocation } from 'react-router-dom';
import { useAuth } from '../hooks/useAuth';

interface DefaultRouteProps {
  children: React.ReactNode;
}

const DefaultRoute: React.FC<DefaultRouteProps> = ({ children }) => {
  const { state } = useAuth();
  const location = useLocation();

  console.log('DefaultRoute状态:', { 
    isAuthenticated: state.isAuthenticated, 
    loading: state.loading, 
    pathname: location.pathname,
    user: state.user 
  });

  // 如果用户已登录且当前在根路径，自动跳转到首页
  useEffect(() => {
    if (state.isAuthenticated && location.pathname === '/') {
      console.log('已登录用户访问根路径，跳转到首页');
      // 使用 window.location 进行强制跳转，避免路由冲突
      window.location.href = '/home';
    }
  }, [state.isAuthenticated, location.pathname]);

  // 如果认证状态还在加载中，显示加载状态
  if (state.loading) {
    console.log('显示加载状态');
    return (
      <div style={{ 
        display: 'flex', 
        justifyContent: 'center', 
        alignItems: 'center', 
        height: '100vh',
        fontSize: '16px',
        color: '#666'
      }}>
        正在加载...
      </div>
    );
  }

  // 如果用户已登录且不在登录相关页面，直接渲染子组件
  if (state.isAuthenticated && !location.pathname.startsWith('/login')) {
    console.log('已登录用户，渲染子组件');
    return <>{children}</>;
  }

  // 如果用户未登录且不在登录相关页面，重定向到登录页
  if (!state.isAuthenticated && !location.pathname.startsWith('/login')) {
    console.log('未登录用户，重定向到登录页');
    return <Navigate to="/login" replace />;
  }

  // 其他情况正常渲染
  console.log('其他情况，正常渲染');
  return <>{children}</>;
};

export default DefaultRoute; 